<template>
	<view class="goods-item" >
		<u-image width="300rpx" height="300rpx" :src="goods.pict_url"></u-image>
		<view class="goods-item-right">
			<view class="goods-item-title">
				<u-icon v-if="goods.type==1" style="margin-right: 4rpx;" size="30" custom-prefix="gewu" name="zu7"></u-icon>
				<u-icon v-if="goods.type==2" style="margin-right: 4rpx;" size="30" custom-prefix="gewu" name="jingdong"></u-icon>
				<u-icon v-if="goods.type==3" style="margin-right: 4rpx;" size="30" custom-prefix="gewu" name="pinduoduo"></u-icon>
				{{goods.short_title}}
			</view>
			<view style="display: flex;flex-direction: row;margin-top: 20rpx;">
				<view class="couponBg">
					<view class="yuan-left"></view>
					<text class="couponText">{{goods.coupon_price}}元券</text>
					<view class="yuan-right"></view>
				</view>
				<view class="fan">赚 ￥{{goods.user_commission}}</view>
			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 10rpx;justify-content: space-between;">
				<view style="font-size: 26rpx;color: #999;text-decoration: line-through;">原价:￥{{goods.original_price}}</view>
				<view style="font-size: 26rpx;color: #999;">月销 {{goods.sales}} 件</view>
			</view>
			<view style="margin: 10rpx 0;">
				<u-line  color="#f1f1f1"/>
			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 10rpx;justify-content: space-between;align-items: flex-end;">
				<view>
					<view style="color: #b9202d; font-size: 24rpx;">券后价</view>
					<view>
						<text style="color: #b60414;font-size: 24rpx;font-weight: bold;">￥</text>
						<text style="color: #b60414; font-size: 36rpx;font-weight: bold;">{{goods.actual_price}}</text>
					</view>
				</view>
				<view class="lingquan-button">领券抢购</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"goodsItem",
		props:{
			goods: {
				type: Object,
				default () {
					return null;
				}
			}
		}
	}
</script>

<style>
	.goods-item{
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	.goods-item-right{
		margin-left: 20rpx;
	}
	.goods-item-title{
		font-size: 32rpx;
		font-weight: bold;
		height: 86rpx;
		overflow: hidden;
	}
	.couponBg{
		background-color: #FF375C;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		position: relative;
		padding: 0 20rpx;
	}
	.yuan-left, .yuan-right{
		width: 20rpx;
		height: 20rpx;
		background-color: #fff;
		position: absolute;
		border-radius: 20rpx;
	}
	.yuan-left{
		left: -10rpx;
	}
	.yuan-right{
		right: -10rpx;
	}
	.couponText{
		color: #fff;
		letter-spacing: 4rpx;
		font-size: 24rpx;
	}
	.fan{
		background-color: #faede9;
		color: #FF375C;
		height: 50rpx;
		display: flex;
		padding: 0 20rpx;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		margin-left: 10rpx;
		font-size: 24rpx;
	}
	.lingquan-button{
		background-color: #FF375C;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		height: 60rpx;
		border-radius: 4rpx;
	}
</style>
